<template>
  <div class="head">
    <a href="#" class="title">甜瓜</a>
    <div class="menu">
      <a href="#">首页</a>
      <a href="#">涂鸦</a>
      <a href="#">旅行</a>
      <a href="#">链接</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Head'
}
</script>

<style lang="stylus" scoped>
body{
  .head{
  display flex
  height 80px
  .title{
    margin-left 30px
    align-items center
    display flex
    font-size 20px
    letter-spacing 3px
    text-transform uppercase
    font-weight 700
    font-family: Segoe UI, "PingFang SC"
    color #000
    text-decoration none
  }
  .menu{
    width 260px
    justify-content space-between
    display flex
    margin-left auto
    margin-right 50px
    font-size 11px
    font-weight 400
    letter-spacing 1.5px
    line-height 80px
    text-transform uppercase
    a{
      text-decoration none
      color #808080
      transform .3s
      &:hover{
            color #000
          }
    }
    
  }
}
}


</style>